import { useEffect, useLayoutEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  // useEffect: 异步执行，不会阻塞页面渲染
  useEffect(() => {
    console.log("useEffect triggered");
    document.getElementById("effect").style.color = "blue";
  }, [count]);

  // useLayoutEffect: 同步执行，阻塞页面渲染
  useLayoutEffect(() => {
    console.log("useLayoutEffect triggered");
    document.getElementById("layoutEffect").style.color = "red";
  }, [count]);

  return (
    <div>
      <h1 id="effect">useEffect Example</h1>
      <h1 id="layoutEffect">useLayoutEffect Example</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
